<template>

  <div
    style="width:100%;height:298px;"
    id="pie"
  ></div>

</template>

<script>
import echarts from "echarts";

export default {
  name: "dataSourcePie",
  props: {
    PieDataSource: {
      type: Object,
      default: function() {
        return { bindDev: 1, offlineDev: 1, onlineDev: 1, unbindDev: 1 };
      }
    }
  },
  data() {
    return {};
  },
  watch: {
    PieDataSource(curVal, oldVal) {
      this.initEchats();
    }
  },
  mounted() {},
  methods: {
    initEchats() {
      var PieDataSource = echarts.init(document.getElementById("pie"));
      let option = {
        title: {
          show: true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
          text: "设备统计", //主标题文本，'\n'指定换行
          x: "center", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
          y: "top", //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
          backgroundColor: "rgba(0,0,0,0)", //标题背景颜色，默认'rgba(0,0,0,0)'透明
          borderColor: "#ccc", //标题边框颜色,默认'#ccc'
          borderWidth: 0, //标题边框线宽，单位px，默认为0（无边框）
          padding: 15, //标题内边距，单位px，默认各方向内边距为5，接受数组分别设定上右下左边距
          itemGap: 20, //主副标题纵向间隔，单位px，默认为10
          textStyle: {
            //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
            fontSize: 24,
            fontStyle: "normal",
            fontWeight: "300",
            color: "#414141"
          },
          zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
          z: 6 //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b}: {c} ({d}%)"
        },
        color: ["#c3dc6a", "#5c983f", "#74af33", "#a6dc6a"],
        series: [
          {
            name: "设备绑定率",
            type: "pie",
            selectedMode: "single",
            radius: [0, "30%"],

            label: {
              normal: {
                position: "inner"
              }
            },
            labelLine: {
              normal: {
                show: false
              }
            },
            data: [
              { value: this.PieDataSource.bindDev, name: "已绑定" },
              { value: this.PieDataSource.unbindDev, name: "未绑定" }
            ]
          },
          {
            name: "设备在线率",
            type: "pie",
            radius: ["40%", "55%"],
            label: {
           
              normal: {
                formatter: "{a|{a}}{abg|}\n{hr|}\n  {b|{b}：}{c}  {per|{d}%}  ",
                backgroundColor: "#eee",
                borderColor: "#aaa",
                borderWidth: 1,
                borderRadius: 4,
                // shadowBlur: 3,
                // shadowOffsetX: 2,
                // shadowOffsetY: 2,
                shadowColor: "#999",
                padding: [0, 3],
                rich: {
                  a: {
                    color: "#999",
                    lineHeight: 22,
                    align: "center"
                  },
                  // abg: {
                  //     backgroundColor: '#333',
                  //     width: '100%',
                  //     align: 'right',
                  //     height: 22,
                  //     borderRadius: [4, 4, 0, 0]
                  // },
                  hr: {
                    borderColor: "#aaa",
                    width: "100%",
                    borderWidth: 0.5,
                    height: 0
                  },
                  b: {
                    fontSize: 12,
                    lineHeight: 22
                  },
                  per: {
                    color: "#eee",
                    backgroundColor: "#333",
                    padding: [1, 2],
                    borderRadius: 2
                  }
                }
              }
            },
            data: [
              { value: this.PieDataSource.offlineDev, name: "离线" },
              { value: this.PieDataSource.onlineDev, name: "在线" }
            ]
          }
        ]
      };
      PieDataSource.setOption(option);
      window.addEventListener("resize", function() {
        PieDataSource.resize();
      });
    },
    async getGroupStatic() {}
  }
};
</script>
